<div style="padding: 2px 15px;">
    <div style="padding-bottom: 6px; border-bottom: 1px dashed #d9d9d9; margin-bottom: 10px;">
        <div nz-row nzType="flex" nzJustify="space-between">
            <div nz-row [nzGutter]="toolService.nzGutter" nzType="flex">
                <div nz-col class="gutter-row search-group font12">
                    <nz-input-group nzCompact>
                        <nz-select [(ngModel)]="selfQueryParams.dynamicKey" style="width: 30%;"
                                   (ngModelChange)="dynamicKeyChange()"
                                   nzDropdownClassName="font12">
                            <nz-option *ngFor="let item of dynamicKeys" [nzValue]="item.id"
                                       [nzLabel]="item.text"></nz-option>
                        </nz-select>
                        <app-input-group-wrapper style="width: 70%;">
                            <input type="search" nz-input placeholder="请输入内容"
                                   class="input-group-right font12"
                                   [(ngModel)]="selfQueryParams.keyword"
                                   (keyup)="keywordChange()"
                                   (search)="keywordChange()">
                        </app-input-group-wrapper>
                    </nz-input-group>
                </div>

                <nz-select
                    nzDropdownClassName="font12"
                    nz-col
                    class="gutter-row server font12"
                    [(ngModel)]="selfQueryParams.typeId"
                    nzPlaceHolder="方法"
                    nzAllowClear
                    nzShowSearch
                    (ngModelChange)="typeChange()">
                    <nz-option *ngFor="let item of types" [nzValue]="item.id"
                               [nzLabel]="item.text"></nz-option>
                </nz-select>
            </div>
            <div class="filter-search-buttons" style="position: unset" >
                <nz-tag nzColor="blue" style="width: 160px; text-align: left;"><i nz-icon nzType="right" nzTheme="outline"></i>&nbsp;{{menuName}}</nz-tag>
                <app-reset-filters (resetFilters)="resetFilters()"></app-reset-filters>
                <app-height-search-labels
                    question questionHref="https://docs.konghq.com/1.3.x/admin-api/"
                >
                </app-height-search-labels>
            </div>
        </div>
    </div>
    <div class="tab" appCalcTableScrolly offsetTop="345" [showShadow]="false"
         (scrollY)="scrollY = $event" scrollYUnit="" [style.height]="scrollY + 102 + 'px'"
         (tabWidthChange)="tabWidthChange($event)">
        <nz-table
            #contentTb nzBordered
            [nzScroll]="{x: scrollXWidth + 'px', y: scrollY + 'px'}"
            [nzFrontPagination]="false"
            [nzShowPagination]="false"
            [nzData]="data?.rows || []"
            [nzLoading]="loading"
            [(nzPageIndex)]="selfQueryParams.page"
            [nzTotal]="data?.total"
            [nzPageSize]="data?.pagesize"
            [nzSize]="'middle'"
            (nzCurrentPageDataChange)="currentPageDataChange($event)">
            <thead (nzSortChange)="sortChange($event)" nzSingleSort>
            <tr>
                <th nzWidth="40px" nzShowCheckbox
                    [(nzChecked)]="allChecked"
                    [nzIndeterminate]="indeterminate"
                    [nzDisabled]="!displayData.length"
                    (nzCheckedChange)="checkAll($event)">
                </th>
                <th nzWidth="100px">分类</th>
                <th nzWidth="120px">名称</th>
                <th nzWidth="80px" nzAlign="center">方法</th>
                <th nzWidth="200px">路径</th>
                <th nzWidth="90px" nzAlign="center">操作</th>
            </tr>
            </thead>
            <tbody>
            <tr *ngFor="let item of contentTb.data">
                <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshStatus()"></td>
                <td>{{(isEmpty(item?.classifyName) ? '待分类' : item?.classifyName)}}</td>
                <td>{{item?.alias}}</td>
                <td nzAlign="center" [ngClass]="{'_get':item.methodsMemo==='GET','_post':item.methodsMemo==='POST','_delete':item.methodsMemo==='DELETE',
                    '_put':item.methodsMemo==='PUT','_head':item.methodsMemo==='HEAD','_patch':item.methodsMemo==='PATCH',
                    '_options':item.methodsMemo==='OPTIONS','_trace':item.methodsMemo==='TRACE'}">
                    {{item?.methodsMemo}}</td>
                <td>{{item?.memo}}</td>
                <td nzAlign="center">
                    <div>
                        <a #btnDelete nz-popconfirm nzPlacement="left" nzTitle="您确认要删除【{{item?.alias}}】吗?"
                           (nzOnConfirm)="deleteRoute(item)"></a>
                        <nz-dropdown-button (nzClick)="openWin(item)" nzTrigger="click">
                            <i nz-icon nzType="play-circle" nz-tooltip nzTitle="试运行"></i>
                            <ul nz-menu>
                                <li nz-menu-item (click)="btnDelete.click()">
                                    删除
                                </li>
                            </ul>
                        </nz-dropdown-button>
                    </div>
                </td>
            </tr>
            </tbody>
        </nz-table>
        <div class="list-page-pagination-wrapper clearFix" *ngIf="contentTb.data.length"
             style="position: absolute; padding: 5px 33px 4px 24px; height: 44px; border-top: 1px solid #d9d9d9;">
            <div class="list-page-buttons fl">
                <label class="check-box"
                       nz-checkbox
                       [(ngModel)]="allChecked"
                       [nzIndeterminate]="indeterminate"
                       [(nzChecked)]="allChecked"
                       [nzDisabled]="!displayData.length"
                       (nzCheckedChange)="checkAll($event)">
                </label>
                <button nz-button nzType="primary" nz-popconfirm nzTitle="您确认要删除选中的记录吗?" [disabled]="checkedNumber === 0"
                        (nzOnConfirm)="deleteRoute(null)">删除</button>
                <nz-dropdown nzPlacement="topLeft" [nzDisabled]="checkedNumber === 0">
                    <button nz-button nz-dropdown>转移分类</button>
                    <ul nz-menu>
                        <ng-container *ngFor="let menu of menus;">
                            <ng-container *ngIf="!menu['children'] || menu['children'].length===0">
                                <li nz-menu-item (click)="changeClassify(menu.id)">{{menu.title}}</li>
                            </ng-container>
                            <ng-container *ngIf="menu['children'] && menu['children'].length>0">
                                <li nz-submenu (click)="changeClassify(menu.id)">
                                    <span title>{{menu.title}}</span>
                                    <ul>
                                        <li nz-menu-item *ngFor="let item of menu['children'];" (click)="changeClassify(item.id)">{{item.title}}</li>
                                    </ul>
                                </li>
                            </ng-container>
                        </ng-container>
                    </ul>
                </nz-dropdown>
            </div>
            <div class="bottom-pagination fr">
                <nz-pagination
                    nzSize="small"
                    nzShowSizeChanger
                    nzShowQuickJumper
                    [nzShowTotal]="rangeTemplate"
                    (nzPageIndexChange)="pageChange($event)"
                    [nzPageSizeOptions]="toolService.nzPageSizeOptions"
                    (nzPageSizeChange)="pageSizeChange($event)"
                    [(nzPageIndex)]="selfQueryParams.page"
                    [nzPageSize]="selfQueryParams.pagesize"
                    [nzTotal]="data?.total">
                </nz-pagination>
            </div>
        </div>
        <ng-template #rangeTemplate let-range="range" let-total>
            <app-table-pagination-info [range]="range" [total]="total"></app-table-pagination-info>
        </ng-template>
    </div>
</div>
